<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem>中医院药事一体化智能服务平台</BreadcrumbItem>
      <BreadcrumbItem>个人信息</BreadcrumbItem>
    </Breadcrumb>

    <h2 class="primary">个人信息</h2>
  </div>

  <div class="info">
    <div class="header">
      <div class="header1">账号名称 &nbsp;&nbsp; administrator</div>
      <div class="header2">角色 &nbsp;&nbsp;自动化测试人员</div>
    </div>
    <div class="info1">
      <div class="left">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-width=120>
          <FormItem label="姓名" prop="user_name" >
            <Input
              v-model="formValidate.user_name"
              placeholder="请输入姓名"
            ></Input>
          
          </FormItem>

          <FormItem label="民族" prop="user_nation">
            <Select v-model="formValidate.user_nation" placeholder="请选择民族">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>

          <FormItem label="工作日期" prop="user_workday" >
            <DatePicker
              type="date"
              placeholder="请选择工作日期"
              v-model="formValidate.user_workday"
              
            ></DatePicker>
          </FormItem>

          <FormItem label="执业范围" prop="user_job_range">
            <Select v-model="formValidate.user_job_range" placeholder="请选择执业范围">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>

          <FormItem label="聘任技术职务" prop="user_job_title_app">
            <Select v-model="formValidate.user_job_title_app" placeholder="请选择聘任技术职务">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>

          <FormItem label="电子邮件" prop="account_mail">
            <Input
              v-model="formValidate.account_mail"
              placeholder="请输入电子邮件"
            ></Input>
          </FormItem>
        </Form>
      </div>

      <div class="center">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-width=120>
          <FormItem label="简码" prop="user_shortname">
            <Input
              v-model="formValidate.user_shortname"
              placeholder="请输入简码"
            ></Input>
          </FormItem>

          <FormItem label="身份证号" prop="user_idnum">
            <Input
              v-model="formValidate.user_idnum"
              placeholder="请输入身份证号"
            ></Input>
          </FormItem>

          <FormItem label="所属机构" prop="org_in_id">
            <Select v-model="formValidate.org_in_id" placeholder="请选择">
              <Option value="beijing">中成药部门</Option>
              <Option value="shanghai">安保部</Option>
            </Select>
          </FormItem>

          <FormItem label="执业证号" prop="user_job_num">
            <Input
              v-model="formValidate.user_job_num"
              placeholder="请输入执业证号"
            ></Input>
          </FormItem>

          <FormItem label="办公电话" prop="user_telphone">
            <Input
              v-model="formValidate.user_telphone"
              placeholder="请输入办公电话"
            ></Input>
          </FormItem>

          <FormItem label="手机号" prop="account_phone">
            <Input
              v-model="formValidate.account_phone"
              placeholder="请输入账号绑定手机号"
            ></Input>
          </FormItem>
        </Form>
      </div>

      <div class="right">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-width=120>
          <FormItem label="性别" prop="user_sex">
            <RadioGroup v-model="formValidate.user_sex">
              <Radio label="male">男</Radio>
              <Radio label="female">女</Radio>
              <Radio label="female">保密</Radio>
            </RadioGroup>
          </FormItem>

          <FormItem label="出生日期" prop="user_birthday" >
            <DatePicker
              type="date"
              placeholder="请选择出生日期"
              v-model="formValidate.user_birthday"
              
            ></DatePicker>
          </FormItem>

          <FormItem label="执业类别" prop="user_job_type">
            <Select v-model="formValidate.user_job_type" placeholder="请选择执业类别">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>

          <FormItem label="专业技术职务" prop="user_job_title">
            <Select v-model="formValidate.user_job_title" placeholder="请选择专业技术职务">
              <Option value="beijing">New York</Option>
              <Option value="shanghai">London</Option>
              <Option value="shenzhen">Sydney</Option>
            </Select>
          </FormItem>

          <FormItem label="移动电话" prop="user_phone">
            <Input
              v-model="formValidate.user_phone"
              placeholder="请输入移动电话"
            ></Input>
          </FormItem>

          <FormItem label="个人简介" prop="user_desc">
            <Input
              v-model="formValidate.user_desc"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="请输入个人简介"
            ></Input>
          </FormItem>

          <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')"
              >确定</Button
            >
            <Button
              @click="handleReset('formValidate')"
              style="margin-left: 8px"
              >修改密码</Button
            >
          </FormItem>
        </Form>
      </div>
    </div>
  </div>
</template>

<script setup>
import {api_get_account} from '../../../api/login/login'
import { onMounted, ref,reactive, onUpdated } from "vue";
const formValidate = ref({
  user_name: "",
  user_shortname: "简码",
  user_sex: '性别',
  user_nation: "民族",
  user_idnum: "身份证号",
  user_birthday: "出生日期",
  user_workday: "工作日期",
  org_in_id: "所属机构",
  user_telphone: "办公电话",
  user_email: "电子邮件",
  user_phone: "移动电话",
  user_job_type: "执业类别",
  user_job_range: "执业范围",
  user_job_num: "执业证号",
  user_job_title: "专业技术职务",
  user_job_title_app: "聘任技术职务",
  user_desc: "个人简介",
  account_phone: "手机号",
  account_mail: "邮箱地址",
});
const getAccountInfo = () => {
  api_get_account()
    .then((res) => {
      if (res.data.msg == '20001001') {
       
       formValidate.value.user_name=res.data.data.user_name
      }
    }).catch((err) => {
    console.log(err);
    })
  
}


onMounted(() => {
  getAccountInfo()
  
})






const ruleValidate = ref({
  name: [
    { required: true, message: "The name cannot be empty", trigger: "blur" },
  ],
  mail: [
    { required: true, message: "Mailbox cannot be empty", trigger: "blur" },
    { type: "email", message: "Incorrect email format", trigger: "blur" },
  ],
  city: [
    { required: true, message: "Please select the city", trigger: "change" },
  ],
  gender: [
    { required: true, message: "Please select gender", trigger: "change" },
  ],
  interest: [
    {
      required: true,
      type: "array",
      min: 1,
      message: "Choose at least one hobby",
      trigger: "change",
    },
    {
      type: "array",
      max: 2,
      message: "Choose two hobbies at best",
      trigger: "change",
    },
  ],
  date: [
    {
      required: true,
      type: "date",
      message: "Please select the date",
      trigger: "change",
    },
  ],
  time: [
    {
      required: true,
      type: "string",
      message: "Please select time",
      trigger: "change",
    },
  ],
  desc: [
    {
      required: true,
      message: "Please enter a personal introduction",
      trigger: "blur",
    },
    {
      type: "string",
      min: 20,
      message: "Introduce no less than 20 words",
      trigger: "blur",
    },
  ],
});

const handleSubmit = (name) => {
  this.$refs[name].validate((valid) => {
    if (valid) {
      this.$Message.success("Success!");
    } else {
      this.$Message.error("Fail!");
    }
  });
};
const handleReset = (name) => {
  this.$refs[name].resetFields();
};
</script>

<style scoped>
.nav {
  height: 80px;
  border-bottom: 1px solid #c4c2c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
  background-color: #ffffff;
}
.info {
  border: 15px solid#f5f7f9;
  padding: 15px;
  background-color: #fff;
  height: 100vh;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}

.primary {
  color: #945635;
}

h2 {
  font-weight: normal;
  font-size: 20px;
}
.header {
  display: flex;
  padding-left: 35px;
  padding-bottom: 30px;
}
.header1 {
  flex: 5;
}
.header2 {
  flex: 9;
}
.info1 {
  display: flex;
}
.left {
  flex: 1;
}
.center {
  flex: 1;
}
.right {
  flex: 1;
}
</style>